<template>
	<el-table :data="tableData.sc" border style="width: 100%">
		<el-table-column fixed prop="saleId" label="销售机会编号" width="120" />
		<el-table-column prop="planDate" label="计划日期" width="120" />
		<el-table-column prop="planContent" label="计划内容" width="320" />
		<el-table-column prop="planExecutedate" label="执行日期" width="120" />
		<el-table-column prop="planExecute" label="执行结果" width="120" />
		<el-table-column prop="uName" label="执行人" width="120" />

		<el-table-column fixed="right" label="操作" width="100" header-align="center">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="handleEdit(scope.row)">制定</el-button>
				<el-button link type="primary" size="small" @click="handleRea(scope.row)">执行</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[7, 12, 21, 28]"
		layout="total, prev, pager, next" v-model:total="total" @size-change="handleSizeChange"
		@current-change="handleCurrentChange" />


	<el-dialog v-model="dialogVisible" title="制定销售机会" width="82%" draggable>
		<el-table :data="EditRow.sc" border style="width: 100%">
			<el-table-column fixed prop="saleId" label="销售机会编号" width="110" />
			<el-table-column prop="saleCname" label="客户名称" width="90" />
			<el-table-column prop="changeSource" label="机会来源" width="90" />
			<el-table-column prop="saleContacts" label="联系人" width="70" />
			<el-table-column prop="salePhone" label="联系电话" width="120" />
			<el-table-column prop="saleSuccess" label="成功率" width="70" />
			<el-table-column prop="saleSynopsis" label="概要" width="120" />
			<el-table-column prop="saleDesc" label="机会描述" width="90" />
			<el-table-column prop="saleCreate" label="创建人" width="70" />
			<el-table-column prop="saleCreatedate" label="创建时间" width="120" />
			<el-table-column prop="salaDesignate" label="指派人" width="70" />
			<el-table-column prop="salaDesignatedate" label="指派时间" width="120" />
			<el-table-column prop="salaState" label="状态" width="100" />
		</el-table>
		<br><br>
		<el-form v-model="testForm" label-width="40%">
			<el-form-item label="计划日期:">
				<div class="block">
					<el-date-picker v-model="testForm.planDate" type="date" placeholder="请输入计划日期" :size="size"
						value-format="YYYY-MM-DD" />
				</div>
			</el-form-item>
			<el-form-item label="计划内容">
				<el-input v-model="testForm.planContent" type="textarea" placeholder="请输入计划内容" style="width: 220px;" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">确认制定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>

	<el-dialog v-model="dialogVisible2" title="制定销售机会" width="82%" draggable>
		<el-table :data="ReaRow.sc" border style="width: 100%">
			<el-table-column fixed prop="saleId" label="销售机会编号" width="110" />
			<el-table-column prop="saleCname" label="客户名称" width="90" />
			<el-table-column prop="changeSource" label="机会来源" width="90" />
			<el-table-column prop="saleContacts" label="联系人" width="70" />
			<el-table-column prop="salePhone" label="联系电话" width="120" />
			<el-table-column prop="saleSuccess" label="成功率" width="70" />
			<el-table-column prop="saleSynopsis" label="概要" width="120" />
			<el-table-column prop="saleDesc" label="机会描述" width="90" />
			<el-table-column prop="saleCreate" label="创建人" width="70" />
			<el-table-column prop="saleCreatedate" label="创建时间" width="120" />
			<el-table-column prop="salaDesignate" label="指派人" width="70" />
			<el-table-column prop="salaDesignatedate" label="指派时间" width="120" />
			<el-table-column prop="salaState" label="状态" width="100" />
		</el-table>
		<br><br>
		<el-form v-model="testForm2" label-width="40%">
			<el-form-item label="执行日期:">
				<div class="block">
					<el-date-picker v-model="testForm2.planExecutedate" type="date" placeholder="请输入执行日期" :size="size"
						value-format="YYYY-MM-DD" />
				</div>
			</el-form-item>
			<el-form-item label="执行结果">
				<el-select v-model="testForm2.planExecute" placeholder="请输入执行结果">
					<el-option label="执行中" value="执行中" />
					<el-option label="执行失败" value="执行失败" />
					<el-option label="执行成功" value="执行成功" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit2">确认制定</el-button>
			</el-form-item>
		</el-form>

	</el-dialog>


</template>


<script setup>
	import {
		ElMessage
	} from 'element-plus'
	import {
		reactive,
		ref
	} from 'vue'
	import axios from 'axios'
	import qs from 'qs'
	import {getCurrentInstance} from 'vue'
	const {proxy} = getCurrentInstance()	
	
	const currentPage = ref(1)
	const pageSize = ref(7)
	const total = ref(10)
	const dialogVisible = ref(false)
	const dialogVisible2 = ref(false)
	const formLabelWidth = '140px'


	const tableData = reactive({});
	const query = () => {
		console.log(proxy.$uName.value)
		axios.post("http://localhost:8080/devPlan/pageName", qs.stringify({
			page: currentPage.value,
			size: pageSize.value,
			uName: proxy.$uName.value
		})).then(res => {
			tableData.sc = res.data.list;
			total.value = 10;
		})
	}
	query()



	//切换每页的行数
	const handleSizeChange = () => {
		query()
	}
	//切换页码的函数
	const handleCurrentChange = () => {
		query()
	}

	//制定计划
	const EditRow = reactive({});
	const testForm = reactive({
		saleId: '',
		planDate: '',
		planContent: '',
	})
	const handleEdit = (row) => {
		testForm.saleId = row.saleId
		//显示弹出框
		dialogVisible.value = true;
		axios.post("http://localhost:8080/saleChance/selectOne", qs.stringify(row)).then(res => {
			EditRow.sc = res.data.list;
		})

	}

	//制定计划
	const onSubmit = () => {
		// console.log(testForm.planDate)
		// console.log(testForm.planContent)
		if (testForm.planDate == '' || testForm.planContent == '') {
			ElMessage({
				message: '请填写完整！',
				type: 'warning',
			})
			return
		}

		axios.post("http://localhost:8080/devPlan/update", qs.stringify(testForm)).then(res => {

			dialogVisible.value = false;
			ElMessage({
				message: '制定计划成功',
				type: 'success',
			})
			query()
		})
	}



	//执行计划
	const ReaRow = reactive({});
	const testForm2 = reactive({
		saleId: '',
		planExecutedate: '',
		planExecute: '',
	})
	const handleRea = (row) => {
		testForm2.saleId = row.saleId
		//显示弹出框
		dialogVisible2.value = true;
		axios.post("http://localhost:8080/saleChance/selectOne", qs.stringify(row)).then(res => {
			ReaRow.sc = res.data.list;
		})

	}

	//执行计划
	const onSubmit2 = () => {
		// console.log(testForm.planDate)
		// console.log(testForm.planContent)
		if (testForm2.planExecutedate == '' || testForm2.planExecute == '') {
			ElMessage({
				message: '请填写完整！',
				type: 'warning',
			})
			return
		}

		axios.post("http://localhost:8080/devPlan/update", qs.stringify(testForm2)).then(res => {

			dialogVisible2.value = false;
			ElMessage({
				message: '执行计划成功',
				type: 'success',
			})
			query()
		})

	}
</script>
